<template>
    <div v-loading="$store.state.saving"
         element-loading-text="保存中" element-loading-spinner="el-icon-loading"
         element-loading-background = "rgba(255,255,255,0.8)">
        <el-tabs>
            <el-tab-pane label="员工行动">
                <el-form :model="moveBehavior" :rules="actRules" ref="actRules">
                    <div class="moudle1">
                        <el-form-item label="行动类型" prop="actionType.actionTypeId">
                            <div class="acTyChoo tryy">
                                <el-select v-model="moveBehavior.actionType" value-key="actionTypeId" placeholder="请选择行动类型">
                                    <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                    <el-option  v-for="item in actiontypes"  :key="item.actionTypeId"  :label="item.actionTypeName" :value="item"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item label="客户" prop="customer.customerId" class="inline__ try">
                            <div class="acTyChoo">
                                <el-select v-model="moveBehavior.customer" value-key="customerId" placeholder="请选择客户" @change="get_hisContact(moveBehavior.customer.customerId)">
                                    <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                    <el-option  v-for="item in customers"  :key="item.customerId"  :label="item.customerName" :value="item"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item label="联系人" prop="contact.contactId" class="inline__ try">
                            <div class="acTyChoo">
                                <el-select v-model="moveBehavior.contact" value-key="contactId" placeholder="请选择联系人">
                                    <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                    <el-option  v-for="item in hisLinkMan"  :key="item.contactId"  :label="item.contactName" :value="item"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item style="height: 110px;position: relative">
                            <el-input type="textarea" :rows="4" placeholder="快速记录客户的行动内容" ></el-input>
                            <div class="reprecord">
                                <el-tag
                                        v-for="tag in behaRecordList"
                                        :key="tag.behaviorName"
                                        closable
                                        type="success"
                                        @close="deltag(tag)"
                                >
                                    {{tag.behaviorName}}
                                </el-tag>
                            </div>
                                <!--客户行为选择按钮-->
                            <el-button class="record"  type="text"   @click="addAction()"><i class="iconfont icon-lianluojilu"></i></el-button>
                        </el-form-item>
<!--                        选择下次联系时间-->
                        <el-form-item prop="actsource" class="inline2__">
                            <!--下次是否回访-->
                            <div>
                                <template>
                                    <el-radio-group v-model="moveBehavior.isContact" @change="isLink">
                                        <el-radio :label="1">下次回访</el-radio>
                                        <el-radio :label="0">暂不联系</el-radio>
                                    </el-radio-group>
                                </template>
                            </div>
                        </el-form-item>
                        <el-form-item class="inline2__">
                            <!--下次回访日期-->
                            <el-date-picker  v-model="nextContacDate" placeholder="下次联系日期" :disabled="isdisabled"  type="date" value-format="yyyy-MM-dd" width="100%" :picker-options="outDateLimit">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item class="inline2__">
                            <el-time-picker v-model="nextContacHour" placeholder="下次联系时间" :disabled="isdisabled" value-format="hh:mm:ss" width="100%">
                            </el-time-picker>
                        </el-form-item>
                        <el-form-item prop="othersRecord">
                            <el-input
                                    type="textarea"
                                    :rows="3"
                                    placeholder="请输入行动内容"
                                    v-model="moveBehavior.othersRecord">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="remarks">
                            <el-input
                                    type="textarea"
                                    :rows="3"
                                    placeholder="备注"
                                    v-model="moveBehavior.remarks">
                            </el-input>
                        </el-form-item>
                        <el-button type="primary" style="margin-top: 15px" size="small" @click="submitForm('actRules')">保存</el-button>

                        <!--客户行为选择弹出框-->
                        <el-dialog  v-dialogDrag :modal="false" title="客户行为" :visible.sync="actionVisible"  width="35%" >
                            <div style="margin-top: 10px">
                                <el-tag style="margin-top: 10px" v-for="item in behaviors" :key="item.behaviorId" @click="tagClick(item)" :style="{'background-color':item.behaviorScore < 0 ? 'rgb(245,108,108)':item.behaviorScore < 7 ? 'rgb(230,162,60)':'rgb(103,194,58)'}">
                                    <span style="color:white">{{item.behaviorName}}({{item.behaviorScore}})</span>
                                </el-tag>
                            </div>
                            <span slot="footer" class="dialog-footer">
                                <el-button type="primary" @click="actionVisible = false">确 定</el-button>
                            </span>
                        </el-dialog>
                    </div>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import {formatTimeToStr} from '@/assets/format.js'
    export default {
        name: "addActform",
        data(){
            return{
                ////////////
                actiontypes:[],               //行动类型数据源
                behaviors:[],            //客户行为类型数据源
                hisLinkMan:[],             //该客户所有联系人
                customers:[],               //客户数据源
                actionVisible:false,
                size:"medium",
                collapseActiveNames:1,//折叠面板
                moveBehavior:{
                    actionDetail:'',
                    actionType:{},
                    isContact:1,          //是否联系
                    actionDate:new Date(),
                    nextContactTime:'1997-01-01',
                    behaviorRecordList:[
                    ],//客户行为
                    customer:{},
                    contact:{},
                    emp:{},           // 业务员
                    othersRecord:"",        //行动详细内容
                    remarks:"",             //备注
                    zan:0,
                },
                cusBehavoirs:{},//所有客户行为标签
                choType:'info',//选择客户标签颜色
                nextContacDate:'',//下次联系日期
                nextContacHour:'',//下次联系时间
                isdisabled:false,//是否禁选时间
                //!!!!!!!!!!!!!!!!!!!
                behaRecordList:[],//暂存客户行为
                actRules:{
                    "actionType.actionTypeId":[
                        {required: true, message: '请选择行动类型', trigger: 'blur'}
                    ],
                    "customer.customerId":[
                        {required: true, message: '客户不能为空', trigger: 'blur'}
                    ],
                    "contact.contactId":[
                        {required: true, message: '联系人不能为空', trigger: 'blur'}
                    ],
                },
                outDateLimit:{},
            }
        },
        methods: {
            addAction(){
                this.actionVisible = true
            },
            isLink:function(val){
                let that = this;
                that.isdisabled = (val === 1)?false:true;
                if(this.moveBehavior.isContact == 1){
                    this.nextContacDate = ''
                    this.nextContacHour = ''
                }
            },
            //点击客户行为标签
            tagClick(behavior){
                //!!!!!!!!!!!!!
                this.behaRecordList.push(behavior) //存入客户行为
            },
            //删除客户行为标签
            deltag(tag){
                this.behaRecordList.splice(this.behaRecordList.indexOf(tag), 1);
            },
            get_InitData(){
                //获取行动类型
                this.axios.get("api/actrecord/getactType",{params:{}})
                    .then(v=>{
                        this.actiontypes = v.data;
                    }).catch(()=>{
                    this.global.mes_error("获取行动类型数据失败！")
                })
                //获取客户行为类型
                this.axios.get("api/actrecord/getBehaviorType")
                    .then(v=>{
                        this.behaviors = v.data;
                    }).catch(()=>{
                    this.global.mes_error("获取客户行为类型数据失败！")
                })
                //获取客户数据源
                this.axios.get("api/customer/select_cus")
                    .then(v=>{
                        this.customers = v.data;
                    }).catch(()=>{
                    this.global.mes_error("获取客户数据失败！")
                })
            },
            //查询该客户所有联系人
            get_hisContact(customerId){
                window.console.log(customerId)
                this.$axios.get("api/customer/hisLinkMan",{params:{"customerId":customerId}})
                    .then(v => {
                        this.hisLinkMan = v.data;
                    }).catch()
            },
            clear(){
                this.moveBehavior={
                    actionType:{},
                    isContact:1,          //是否联系
                    actionDate:new Date(),
                    nextContactTime:'1997-01-01 00:00:00',
                    behaviorRecordList:[],//客户行为
                    customer:{},
                    contact:{},
                    emp:{},           // 业务员
                    othersRecord:"",        //行动详细内容
                    remarks:"",             //备注
                    zan:0,
                }
                this.behaRecordList = []
                this.nextContacDate = ''//下次联系日期
                this.nextContacHour = ''//下次联系时间
            },
            submitForm(formName){
                window.console.log(this.nextContactTime)
                this.$refs[formName].validate((valid) => {
                    if (valid){
                        let obj = {}
                        this.moveBehavior.emp = this.$store.state.user
                        if(this.nextContactTime != null && this.nextContactTime != ''){
                            this.moveBehavior.nextContactTime =this.nextContactTime
                        }
                        this.behaRecordList.forEach(beh=>{
                            obj.behavior = beh;
                            obj.customer = this.moveBehavior.customer;
                            this.moveBehavior.actionDetail = this.moveBehavior.actionDetail + beh.behaviorName+";";
                            this.moveBehavior.behaviorRecordList.push(obj);
                        })
                        this.behaRecordList = []
                        this.axios.post("api/actrecord/saveactRecort",this.moveBehavior)
                            .then(v=>{
                                this.clear()
                                this.$parent.$parent.get_actiontype()
                                this.$parent.$parent.addRecordDialogVisible=false
                            }).catch(err=>{
                            window.console.log(err)
                            this.clear()
                            this.$parent.$parent.get_actiontype()
                            this.$parent.$parent.addRecordDialogVisible=false
                        })
                    }else{
                        this.global.mes_error("数据错误，提交失败")
                        return false;
                    }
                });
            },
        },
        computed:{
            nextContactTime(){//下次回访时间
                return new Date(this.nextContacDate +' '+ this.nextContacHour);
            }
        },
        filters: {
            formatDate : function (time) {
                if(time!=null&&time!="")
                {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd HH:mm:ss");
                }else{
                    return "";
                }
            }
        },
        created:function(){
            this.get_InitData();
            this.outDateLimit={
                disabledDate(time) {
                    return time.getTime() < new Date().getTime();
                }
            }
        },
    }
</script>

<style scoped>
    .inline__{width:50%!important;display:inline-block}
    .inline2__{width:33%!important;display:inline-block}
    .inline3__{width:90%!important;display:inline-block}

    .bx .box-card{
        margin: 20px 0;
    }
    .clearfix .en{
        position: relative; top: -13px;left: 13px
    }
    .box-card  .time {
        position: relative; left: 150px
    }
    .box-card {
        width: 360px;
        margin: 20px 20px;
    }
    .reprecord{
        position: absolute;top:2px;left:2px;
    }
    .record{
        position: absolute;bottom:0px;right:-5px;
    }
    /*选择日期格式·*/
    /*.el-input--prefix/deep/ .el-input__inner{*/
    /*    width: 147px;*/
    /*}*/
    /* 调整日期选择器格式*/
    .el-input__prefix i{font-size: 0px}
    .el-input--prefix .el-input__inner{padding-left: 5px !important;}
    .acTyChoo{
        padding-bottom: 15px;
    }
    table tr{
        width: 100%;
    }
    .tryy .el-select {
        width:90% !important;
    }
    .try .el-select {
        width:82% !important;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .iconfont{
        font-size: 18px;

    }
    table {
        border-spacing: 0;
        border-collapse: collapse;
        border-width: 0;

    }

</style>